<template>
  <div class="common-table-component">
    <a-table
      :columns="columns"
      :data-source="data"
      :loading="loading"
      :pagination="false"
      @change="handleTableChange"
      row-key="id"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'valueType'">
          <a-tag>{{ $t(`setting.${record.valueType}`) }}</a-tag>
        </template>
        <template v-if="column.key === 'configValue'">
          <template v-if="record.valueType === 'boolean'">
            <a-tag :color="record.configValue === 'true' ? 'green' : 'red'">
              {{ record.configValue === 'true' ? $t('common.yes') : $t('common.no') }}
            </a-tag>
          </template>
          <template v-else-if="record.configValue && record.configValue.length > 20">
            {{ record.configValue.substring(0, 20) }}...
          </template>
          <template v-else>
            {{ record.configValue }}
          </template>
        </template>
        <template v-if="column.key === 'builtIn'">
          <a-tag :color="record.builtIn ? 'blue' : 'default'">
            {{ record.builtIn ? $t('common.yes') : $t('common.no') }}
          </a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="handleEdit(record as Config)">
              <EditOutlined />{{ $t('common.edit') }}
            </a-button>
            <a-button type="link" danger @click="handleDelete(record as Config)">
              <DeleteOutlined />{{ $t('common.delete') }}
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    
    <!-- 自定义分页组件 -->
    <Pagination
      v-if="pagination"
      :total="pagination.total || 0"
      :current="pagination.current || 1"
      :pageSize="pagination.pageSize || 10"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="(page, pageSize) => handleTableChange({ current: page, pageSize })"
    />
  </div>
</template>

<script lang="ts" setup>
import type { TablePaginationConfig } from 'ant-design-vue'
import type { Config } from '@/types/api/config/config'
import { useTableColumns } from '../config/tableColumns'
import Pagination from '@/components/common/Pagination.vue'

defineOptions({
  name: 'ConfigTable'
})

withDefaults(defineProps<{
  data: Config[]
  loading: boolean
  pagination: TablePaginationConfig
}>(), {
  data: () => [],
  loading: false
})

// Emits定义
const emit = defineEmits<{
  (e: 'table-change', pagination: TablePaginationConfig): void
  (e: 'edit', record: Config): void
  (e: 'delete', record: Config): void
}>()

// 表格列配置
const columns = useTableColumns()

// 表格分页变更
const handleTableChange = (pagination: TablePaginationConfig) => {
  emit('table-change', pagination)
}

// 编辑
const handleEdit = (record: Config) => {
  emit('edit', record)
}

// 删除
const handleDelete = (record: Config) => {
  emit('delete', record)
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 